import React, { useState, useEffect, useCallback, useRef } from 'react';
import {
  Button,
  Progress,
  Card,
  Tag,
  Row,
  Col
} from 'tdesign-react';
import { PlayIcon, PauseIcon, RefreshIcon, DashboardIcon, StarIcon } from 'tdesign-icons-react';
import VirtualKeyboard from '../keyboard/VirtualKeyboard';
import CelebrationAnimation from '../effects/CelebrationAnimation';
import { useSound } from '../../hooks/useSound';

const PracticeContainer: React.FC<{ children: React.ReactNode }> = ({ children }) => (
  <div style={{
    background: 'linear-gradient(135deg, #2c3e50 0%, #34495e 100%)',
    borderRadius: '20px',
    padding: '16px',
    minHeight: '95vh',
    width: '100%',
    maxWidth: '100%',
    color: '#fff',
    margin: 0,
    boxSizing: 'border-box',
    boxShadow: '0 4px 6px rgba(0, 0, 0, 0.1)'
  }}>
    {children}
  </div>
);

const TextDisplay: React.FC<{ children: React.ReactNode }> = ({ children }) => (
  <div style={{
    fontSize: '2.5rem',
    lineHeight: 1.6,
    fontFamily: '"JetBrains Mono", "Courier New", monospace',
    backgroundColor: 'rgba(255,255,255,0.98)',
    color: '#2c3e50',
    padding: '32px',
    borderRadius: '20px',
    margin: '24px 0',
    minHeight: '160px',
    wordBreak: 'break-word',
    letterSpacing: '3px',
    width: '100%',
    boxSizing: 'border-box',
    boxShadow: '0 8px 32px rgba(0,0,0,0.15)',
    border: '3px solid rgba(52, 152, 219, 0.3)'
  }}>
    {children}
  </div>
);

const CharacterSpan: React.FC<{ status: 'pending' | 'correct' | 'incorrect' | 'current'; children: React.ReactNode }> = ({ status, children }) => {
  const getStyle = (): React.CSSProperties => {
    const baseStyle: React.CSSProperties = {
      padding: '6px 4px',
      borderRadius: '8px',
      transition: 'all 0.3s ease',
      fontWeight: 'bold',
      textShadow: status !== 'pending' ? '1px 1px 2px rgba(0,0,0,0.3)' : 'none'
    };

    if (status === 'current') {
      return {
        ...baseStyle,
        backgroundColor: '#3498db',
        color: '#fff',
        animation: 'blink 1.2s infinite',
        boxShadow: '0 0 15px rgba(52, 152, 219, 0.5)',
        transform: 'scale(1.1)'
      };
    } else if (status === 'correct') {
      return {
        ...baseStyle,
        backgroundColor: '#27ae60',
        color: '#fff',
        boxShadow: '0 2px 8px rgba(39, 174, 96, 0.3)'
      };
    } else if (status === 'incorrect') {
      return {
        ...baseStyle,
        backgroundColor: '#e74c3c',
        color: '#fff',
        boxShadow: '0 2px 8px rgba(231, 76, 60, 0.4)',
        animation: 'shake 0.5s ease-in-out'
      };
    }
    return baseStyle;
  };

  return <span style={getStyle()}>{children}</span>;
};

const StatsCard: React.FC<{ children: React.ReactNode; style?: React.CSSProperties }> = ({ children, style }) => (
  <Card style={{
    background: 'linear-gradient(45deg, #3498db 30%, #2980b9 90%)',
    borderRadius: '15px',
    color: '#fff',
    margin: '8px',
    ...style
  }}>
    {children}
  </Card>
);

const InputArea = React.forwardRef<HTMLTextAreaElement, React.TextareaHTMLAttributes<HTMLTextAreaElement>>((props, ref) => (
  <textarea
    {...props}
    ref={ref}
    style={{
      opacity: 0,
      position: 'absolute',
      left: '-9999px',
      width: '1px',
      height: '1px'
    }}
  />
));

interface TypingStats {
  wpm: number;
  accuracy: number;
  correctChars: number;
  totalChars: number;
  timeElapsed: number;
}

interface EnglishTypingPracticeProps {
  difficulty?: 'easy' | 'medium' | 'hard';
}

const PRACTICE_TEXTS = {
  easy: [
    // 基础指法练习 - 单个手指重复训练
    "fff jjj fff jjj ddd kkk ddd kkk sss lll sss lll aaa aaa",
    "ddd fff jjj kkk lll fff ddd jjj kkk lll sss aaa",
    "asdf jkl asdf jkl fdsa lkj fdsa lkj",
    "ff jj dd kk ss ll aa ff jj dd kk ss ll aa",
    "fj dk sl a fj dk sl a fj dk sl a",
    // 渐进练习 - 相邻手指协调
    "fd jk fs jl ad ak fd jk fs jl",
    "df kj sf lj da ka df kj sf lj",
    "sad lad had fad dad sad lad had",
    "ask all add fall ask all add fall",
    // 简单单词 - 基本手位
    "as ask sad dad had lad fall all add",
    "flask flask flask flask flask",
    "hall hall hall hall hall",
    "shall shall shall shall shall"
  ],
  medium: [
    // 中等难度 - 加入大写和标点
    "Ask Dad. Fall Hall. Had All Flask. Sad Lad Add.",
    "She sells sea shells by the sea shore.",
    "The quick brown fox jumps over the lazy dog.",
    "Peter Piper picked a peck of pickled peppers.",
    "How much wood would a woodchuck chuck?",
    "A journey of a thousand miles begins with a single step.",
    "Life is what happens while you are busy making plans.",
    "The only way to do great work is to love what you do.",
    "Innovation distinguishes between a leader and a follower.",
    "Success is not final, failure is not fatal.",
    "It is the courage to continue that counts most.",
    "The future belongs to those who believe in dreams."
  ],
  hard: [
    // 困难模式 - 追求速度的复杂文本
    "Programming is not about typing, it's about thinking and problem solving efficiently.",
    "The complexity of software development lies not in the coding itself, but in understanding the requirements, designing elegant solutions, and maintaining code quality throughout the entire lifecycle.",
    "Artificial intelligence and machine learning have revolutionized how we approach data processing, pattern recognition, and automated decision-making across various industries and sectors.",
    "Cloud computing architectures enable scalable, distributed systems that can handle massive workloads while maintaining high availability and fault tolerance under extreme conditions.",
    "Modern web development requires proficiency in JavaScript, HTML5, CSS3, React, Node.js, databases, version control systems, testing frameworks, and continuous integration/deployment pipelines.",
    "Cybersecurity professionals must stay vigilant against evolving threats including malware, phishing attacks, SQL injection, cross-site scripting, distributed denial-of-service attacks, and advanced persistent threats.",
    "Data scientists utilize statistical analysis, machine learning algorithms, data visualization tools, and programming languages like Python and R to extract meaningful insights from large datasets and make data-driven decisions."
  ]
};

const EnglishTypingPractice: React.FC<EnglishTypingPracticeProps> = ({ difficulty = 'easy' }) => {
  const [currentText, setCurrentText] = useState('');
  const [userInput, setUserInput] = useState('');
  const [isPlaying, setIsPlaying] = useState(false);
  const [startTime, setStartTime] = useState<number | null>(null);
  const [stats, setStats] = useState<TypingStats>({
    wpm: 0,
    accuracy: 0,
    correctChars: 0,
    totalChars: 0,
    timeElapsed: 0
  });
  const [currentCharIndex, setCurrentCharIndex] = useState(0);
  const [incorrectChars, setIncorrectChars] = useState<Set<number>>(new Set());
  const [activeKey, setActiveKey] = useState<string>('');
  const [correctKeys, setCorrectKeys] = useState<string[]>([]);
  const [wrongKeys, setWrongKeys] = useState<string[]>([]);
  const [isComposing, setIsComposing] = useState(false);
  const [showCelebration, setShowCelebration] = useState(false);
  const [completionTime, setCompletionTime] = useState(0);
  
  const inputRef = useRef<HTMLTextAreaElement>(null);
  const { playSuccessSound, playErrorSound, playCelebrationSound } = useSound();

  const getRandomText = useCallback(() => {
    const texts = PRACTICE_TEXTS[difficulty];
    return texts[Math.floor(Math.random() * texts.length)];
  }, [difficulty]);

  const startPractice = () => {
    setCurrentText(getRandomText());
    setUserInput('');
    setCurrentCharIndex(0);
    setIncorrectChars(new Set());
    setIsPlaying(true);
    setStartTime(Date.now());
    setCorrectKeys([]);
    setWrongKeys([]);
    setIsComposing(false);
    setShowCelebration(false);
    setCompletionTime(0);
    setStats({
      wpm: 0,
      accuracy: 0,
      correctChars: 0,
      totalChars: 0,
      timeElapsed: 0
    });
    
    // 聚焦到隐藏的输入框
    setTimeout(() => {
      if (inputRef.current) {
        inputRef.current.focus();
      }
    }, 100);
  };

  const pausePractice = () => {
    setIsPlaying(false);
  };

  const resetPractice = () => {
    // 直接调用 startPractice 来重新开始，而不是仅仅重置状态
    startPractice();
  };

  const calculateStats = useCallback(() => {
    if (!startTime) return;

    const timeElapsed = (Date.now() - startTime) / 1000 / 60; // 分钟
    const correctChars = userInput.length - incorrectChars.size;
    const accuracy = userInput.length > 0 ? (correctChars / userInput.length) * 100 : 100;
    const wpm = timeElapsed > 0 ? Math.round((correctChars / 5) / timeElapsed) : 0;

    setStats({
      wpm,
      accuracy: Math.round(accuracy),
      correctChars,
      totalChars: userInput.length,
      timeElapsed: Math.round(timeElapsed * 60)
    });
  }, [startTime, userInput.length, incorrectChars.size]);

  useEffect(() => {
    if (isPlaying) {
      const interval = setInterval(calculateStats, 500);
      return () => clearInterval(interval);
    }
  }, [isPlaying, calculateStats]);

  const handleInputChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
    if (!isPlaying || !currentText) return;
    
    // 如果正在组合输入，只更新组合状态，不处理实际输入
    if (isComposing) return;

    const value = e.target.value;
    
    // 如果用户试图输入更多字符但当前位置是错误的，阻止输入
    if (value.length > userInput.length) {
      const nextCharToType = currentText[currentCharIndex];
      const newChar = value[value.length - 1];
      
      if (nextCharToType === newChar) {
        // 输入正确，允许前进
        setUserInput(value);
        setCurrentCharIndex(currentCharIndex + 1);
        playSuccessSound();
        setCorrectKeys(prev => [...prev.slice(-4), newChar]);
        setWrongKeys([]);
        
        // 移除错误标记（如果之前这个位置是错的）
        if (incorrectChars.has(currentCharIndex)) {
          setIncorrectChars(prev => {
            const newSet = new Set(prev);
            newSet.delete(currentCharIndex);
            return newSet;
          });
        }
        
        // 设置下一个要按的键
        if (currentCharIndex + 1 < currentText.length) {
          setActiveKey(currentText[currentCharIndex + 1]);
        } else {
          setActiveKey('');
          setIsPlaying(false);
          // 计算完成时间
          if (startTime) {
            const totalTime = Math.round((Date.now() - startTime) / 1000);
            setCompletionTime(totalTime);
            
            // 保存练习记录到 localStorage
            const record = {
              id: Date.now().toString(),
              date: new Date().toISOString(),
              difficulty,
              wpm: stats.wpm,
              accuracy: stats.accuracy,
              completionTime: totalTime,
              score: stats.wpm * 10 + Math.round(stats.accuracy * 5)
            };
            
            const existingRecords = localStorage.getItem('typingRecords');
            const records = existingRecords ? JSON.parse(existingRecords) : [];
            records.push(record);
            localStorage.setItem('typingRecords', JSON.stringify(records));
          }
          // 触发庆祝动画和音效
          setShowCelebration(true);
          playCelebrationSound();
        }
      } else {
        // 输入错误，不允许前进，阻止输入
        playErrorSound();
        setWrongKeys([nextCharToType]);
        setIncorrectChars(prev => new Set(prev).add(currentCharIndex));
        // 不更新 userInput，保持在当前位置
        e.target.value = userInput; // 恢复到之前的值
        return;
      }
    } else if (value.length < userInput.length) {
      // 用户删除了字符，允许回退
      setUserInput(value);
      const newCharIndex = value.length;
      setCurrentCharIndex(newCharIndex);
      
      // 设置下一个要按的键
      if (newCharIndex < currentText.length) {
        setActiveKey(currentText[newCharIndex]);
      }
    }
  };

  const handleCompositionStart = () => {
    setIsComposing(true);
  };

  const handleCompositionEnd = (e: React.CompositionEvent<HTMLTextAreaElement>) => {
    setIsComposing(false);
    // 组合输入结束后，延迟一小段时间再处理输入，确保状态正确更新
    setTimeout(() => {
      if (inputRef.current) {
        const syntheticEvent = {
          target: inputRef.current,
          currentTarget: inputRef.current
        } as React.ChangeEvent<HTMLTextAreaElement>;
        handleInputChange(syntheticEvent);
      }
    }, 10);
  };

  const renderText = () => {
    return currentText.split('').map((char, index) => {
      let status: 'pending' | 'correct' | 'incorrect' | 'current' = 'pending';
      
      if (index < currentCharIndex) {
        status = incorrectChars.has(index) ? 'incorrect' : 'correct';
      } else if (index === currentCharIndex) {
        status = 'current';
      }

      return (
        <CharacterSpan key={index} status={status}>
          {char === ' ' ? '␣' : char}
        </CharacterSpan>
      );
    });
  };

  // 确保隐藏输入框保持焦点
  useEffect(() => {
    const handleClick = () => {
      if (isPlaying && inputRef.current) {
        inputRef.current.focus();
      }
    };

    const handleKeyDown = (e: KeyboardEvent) => {
      if (isPlaying && inputRef.current && document.activeElement !== inputRef.current) {
        inputRef.current.focus();
      }
      
      // 检测英文字符输入，如果输入英文字符且正在组合状态，说明已切换到英文输入法
      if (isComposing && e.key.length === 1 && /[a-zA-Z0-9\s.,;:'"!?-]/.test(e.key)) {
        setIsComposing(false);
      }
    };

    if (isPlaying) {
      document.addEventListener('click', handleClick);
      document.addEventListener('keydown', handleKeyDown);
    }

    return () => {
      document.removeEventListener('click', handleClick);
      document.removeEventListener('keydown', handleKeyDown);
    };
  }, [isPlaying, isComposing]);

  const progress = currentText ? (currentCharIndex / currentText.length) * 100 : 0;
  const nextChar = currentText ? currentText[currentCharIndex] : '';
  
  // 手指映射和颜色
  const fingerMap: Record<string, 'pinky' | 'ring' | 'middle' | 'index' | 'thumb'> = {
    '`': 'pinky', '1': 'pinky', 'q': 'pinky', 'a': 'pinky', 'z': 'pinky',
    '2': 'ring', 'w': 'ring', 's': 'ring', 'x': 'ring',
    '3': 'middle', 'e': 'middle', 'd': 'middle', 'c': 'middle',
    '4': 'index', '5': 'index', 'r': 'index', 't': 'index', 
    'f': 'index', 'g': 'index', 'v': 'index', 'b': 'index',
    '6': 'index', '7': 'index', 'y': 'index', 'u': 'index',
    'h': 'index', 'j': 'index', 'n': 'index', 'm': 'index',
    '8': 'middle', 'i': 'middle', 'k': 'middle', ',': 'middle',
    '9': 'ring', 'o': 'ring', 'l': 'ring', '.': 'ring',
    '0': 'pinky', '-': 'pinky', '=': 'pinky', 'p': 'pinky', '[': 'pinky', ']': 'pinky',
    ';': 'pinky', "'": 'pinky', '/': 'pinky', '\\': 'pinky',
    ' ': 'thumb'
  };
  
  const fingerColors = {
    pinky: { bg: '#e74c3c', border: '#c0392b' },
    ring: { bg: '#f39c12', border: '#d68910' }, 
    middle: { bg: '#f1c40f', border: '#f39c12' },
    index: { bg: '#27ae60', border: '#229954' },
    thumb: { bg: '#3498db', border: '#2980b9' }
  };
  
  const getKeyColor = (char: string) => {
    const finger = fingerMap[char.toLowerCase()];
    return finger ? fingerColors[finger] : { bg: '#95a5a6', border: '#7f8c8d' };
  };

  return (
    <div style={{ width: '100%' }}>
      <PracticeContainer>
        <div style={{ textAlign: 'center', marginBottom: '24px' }}>
          <h1 style={{ fontSize: '2rem', marginBottom: '16px', color: '#fff' }}>
            ⌨️ 英文打字练习
          </h1>
          
          <div style={{ display: 'flex', justifyContent: 'center', gap: '16px', marginBottom: '16px' }}>
            <Tag 
              theme={difficulty === 'easy' ? 'success' : difficulty === 'medium' ? 'warning' : 'danger'}
              size="large"
            >
              难度: {difficulty.toUpperCase()}
            </Tag>
          </div>

          <Row justify="center" gutter={[16, 16]} style={{ marginBottom: '16px' }}>
            <Col>
              <StatsCard style={{ minWidth: '200px' }}>
                <div style={{ padding: '16px' }}>
                  <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
                    <DashboardIcon />
                    <h3 style={{ margin: 0, fontSize: '1.25rem' }}>速度: {stats.wpm} WPM</h3>
                  </div>
                </div>
              </StatsCard>
            </Col>
            
            <Col>
              <StatsCard style={{ minWidth: '200px' }}>
                <div style={{ padding: '16px' }}>
                  <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
                    <StarIcon />
                    <h3 style={{ margin: 0, fontSize: '1.25rem' }}>准确率: {stats.accuracy}%</h3>
                  </div>
                </div>
              </StatsCard>
            </Col>
          </Row>

          <div style={{ marginBottom: '16px' }}>
            <h4 style={{ marginBottom: '8px', fontSize: '1.1rem' }}>
              进度: {Math.round(progress)}%
            </h4>
            <Progress 
               percentage={progress}
               strokeWidth={10}
             />
          </div>
        </div>

        <div style={{ display: 'flex', justifyContent: 'center', gap: '16px', marginBottom: '24px' }}>
          {!isPlaying && !currentText ? (
            <Button
              theme="success"
              size="large"
              icon={<PlayIcon />}
              onClick={startPractice}
              style={{
                fontSize: '1.2rem',
                padding: '12px 24px',
                borderRadius: '25px'
              }}
            >
              开始练习
            </Button>
          ) : !isPlaying ? (
            <Button
              theme="success"
              size="large"
              icon={<PlayIcon />}
              onClick={() => setIsPlaying(true)}
              style={{
                fontSize: '1.2rem',
                padding: '12px 24px',
                borderRadius: '25px'
              }}
            >
              继续
            </Button>
          ) : (
            <Button
              theme="warning"
              size="large"
              icon={<PauseIcon />}
              onClick={pausePractice}
              style={{
                fontSize: '1.2rem',
                padding: '12px 24px',
                borderRadius: '25px'
              }}
            >
              暂停
            </Button>
          )}
          
          <Button
            theme="danger"
            size="large"
            icon={<RefreshIcon />}
            onClick={resetPractice}
            style={{
              fontSize: '1.2rem',
              padding: '12px 24px',
              borderRadius: '25px'
            }}
          >
            重新开始
          </Button>
        </div>

        {currentText && (
          <TextDisplay>
            {renderText()}
          </TextDisplay>
        )}

        {isComposing && (
          <div 
            style={{ 
              display: 'flex',
              alignItems: 'center',
              justifyContent: 'center',
              gap: '16px',
              marginBottom: '16px',
              padding: '12px',
              borderRadius: '8px',
              backgroundColor: 'rgba(243, 156, 18, 0.1)',
              border: '1px solid rgba(243, 156, 18, 0.5)'
            }}
          >
            <p style={{ fontWeight: 'bold', color: '#f39c12', margin: 0 }}>
              ⚠️ 请切换到英文输入法进行练习
            </p>
          </div>
        )}

        {nextChar && isPlaying && (
          <div 
            style={{ 
              display: 'flex',
              alignItems: 'center',
              justifyContent: 'center',
              gap: '24px',
              marginBottom: '20px',
              padding: '16px',
              borderRadius: '12px',
              backgroundColor: 'rgba(52, 152, 219, 0.05)',
              border: '1px solid rgba(52, 152, 219, 0.3)'
            }}
          >
            <h4 style={{ fontWeight: 'bold', color: '#3498db', margin: 0 }}>
              下一个字符:
            </h4>
            
            <div style={{ 
              fontSize: '1.5em', 
              color: '#3498db',
              fontWeight: 'bold',
              padding: '6px 12px',
              backgroundColor: 'rgba(52, 152, 219, 0.1)',
              borderRadius: '8px',
              border: '1px solid #3498db',
              fontFamily: '"JetBrains Mono", "Courier New", monospace',
              minWidth: '60px',
              textAlign: 'center'
            }}>
              {nextChar === ' ' ? '空格' : nextChar}
            </div>

            <p style={{ color: '#666', margin: '0 8px' }}>
              按键位置:
            </p>

            {(() => {
              const keyColor = getKeyColor(nextChar);
              const finger = fingerMap[nextChar.toLowerCase()];
              const fingerNames = {
                pinky: '小指',
                ring: '无名指',
                middle: '中指', 
                index: '食指',
                thumb: '拇指'
              };
              
              return (
                <div style={{ display: 'flex', alignItems: 'center', gap: '16px' }}>
                  <div style={{
                    width: '60px',
                    height: '60px',
                    backgroundColor: keyColor.bg,
                    color: '#fff',
                    border: `3px solid ${keyColor.border}`,
                    borderRadius: '12px',
                    display: 'flex',
                    alignItems: 'center',
                    justifyContent: 'center',
                    fontWeight: 'bold',
                    fontSize: '1.2em',
                    fontFamily: '"Courier New", monospace',
                    textShadow: '1px 1px 2px rgba(0,0,0,0.3)',
                    boxShadow: `0 2px 6px rgba(0,0,0,0.2), 0 0 15px ${keyColor.bg}80`,
                    animation: 'pulse 1.5s infinite'
                  }}>
                    {nextChar === ' ' ? 'Space' : nextChar.toUpperCase()}
                  </div>
                  
                  {finger && (
                    <div style={{
                      backgroundColor: 'rgba(255,255,255,0.8)',
                      padding: '4px 8px',
                      borderRadius: '6px',
                      fontSize: '0.9em',
                      color: keyColor.bg,
                      fontWeight: 'bold',
                      border: `1px solid ${keyColor.bg}40`
                    }}>
                      {fingerNames[finger]}
                    </div>
                  )}
                </div>
              );
            })()}
          </div>
        )}

        <VirtualKeyboard
          activeKey={activeKey}
          correctKeys={correctKeys}
          wrongKeys={wrongKeys}
          showFingerGuide={true}
        />

        {progress === 100 && !showCelebration && (
          <div style={{ textAlign: 'center', marginTop: '24px' }}>
            <h2 style={{ color: '#27ae60', marginBottom: '16px', fontSize: '1.5rem' }}>
              🎉 练习完成！
            </h2>
            <h3 style={{ fontSize: '1.25rem', margin: '8px 0' }}>
              最终成绩: {stats.wpm} WPM，准确率 {stats.accuracy}%
            </h3>
            <h4 style={{ marginTop: '8px', fontSize: '1.1rem' }}>
              {stats.wpm >= 40 ? '🏆 优秀！' : 
               stats.wpm >= 25 ? '👏 良好！' : 
               '💪 继续加油！'}
            </h4>
            <div style={{ marginTop: '16px' }}>
              <Button
                theme="success"
                size="large"
                onClick={startPractice}
                style={{
                  fontSize: '1.1rem',
                  padding: '12px 24px',
                  borderRadius: '25px'
                }}
              >
                🚀 再来一次
              </Button>
            </div>
          </div>
        )}

        {/* 隐藏的输入框用于捕获键盘输入 */}
        <InputArea
          ref={inputRef}
          value={userInput}
          onChange={handleInputChange}
          onCompositionStart={handleCompositionStart}
          onCompositionEnd={handleCompositionEnd}
          onBlur={() => {
            if (isPlaying && inputRef.current) {
              setTimeout(() => inputRef.current?.focus(), 0);
            }
          }}
          autoComplete="off"
          autoCorrect="off"
          autoCapitalize="off"
          spellCheck="false"
        />

        {/* 庆祝动画 */}
        {showCelebration && (
          <CelebrationAnimation
            score={stats.wpm * 10 + Math.round(stats.accuracy * 5)}
            wpm={stats.wpm}
            accuracy={stats.accuracy}
            completionTime={completionTime}
            onComplete={() => setShowCelebration(false)}
          />
        )}
      </PracticeContainer>
    </div>
  );
};

export default EnglishTypingPractice;